calendar: Add "Clear All" button to message list

We will eventually remove section titles from the message list to
reduce visual noise and give the actual information provided by
the messages more space. So in order to not lose the ability to
mass-dismiss messages, the latest mockups spot a "Clear All" button
at the bottom - implement that.

https://bugzilla.gnome.org/show_bug.cgi?id=775763

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 33c95cc6af3e72e67fed7a2add315603a297949d..cd216ad11b1fe2a3dbc8dcdc6e9b3134fcafb6ac 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -861,6 +861,12 @@ StScrollBar {
 .message-list {
   width: 31.5em; }
 
+.message-list-clear-button.button {
+  background-color: transparent;
+  margin: 1.5em 1.5em 0; }
+  .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
+    background-color: #0d0d0d; }
+
 .message-list-sections {
   spacing: 1.5em; }
 

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index 2af71071ae2f4e4e89851dee93befd5007d4d693..e7d72f3d2dbc4ed6382a619b9c6abc1590a8144e 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit 2af71071ae2f4e4e89851dee93befd5007d4d693
+Subproject commit e7d72f3d2dbc4ed6382a619b9c6abc1590a8144e

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 88ec11bc64713f9d36932c8d30697d0af1bac818..7c703022cdda4a6e5a6505fc5a53365ec6447fa0 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -861,6 +861,12 @@ StScrollBar {
 .message-list {
   width: 31.5em; }
 
+.message-list-clear-button.button {
+  background-color: transparent;
+  margin: 1.5em 1.5em 0; }
+  .message-list-clear-button.button:hover, .message-list-clear-button.button:focus {
+    background-color: #454c4c; }
+
 .message-list-sections {
   spacing: 1.5em; }
 

diff --git a/js/ui/calendar.js b/js/ui/calendar.js
index 70252e2ec3e0104d50557f499fec18aa553467d1..8669efe5b8ceeba8f379fa98c066206c023d6971 100644 (file)
--- a/js/ui/calendar.js
+++ b/js/ui/calendar.js
@@ -1098,12 +1098,26 @@ const CalendarMessageList = new Lang.Class({
         this._placeholder = new Placeholder();
         this.actor.add_actor(this._placeholder.actor);
 
+        let box = new St.BoxLayout({ vertical: true,
+                                     x_expand: true, y_expand: true });
+        this.actor.add_actor(box);
+
         this._scrollView = new St.ScrollView({ style_class: 'vfade',
                                                overlay_scrollbars: true,
                                                x_expand: true, y_expand: true,
                                                x_fill: true, y_fill: true });
         this._scrollView.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
-        this.actor.add_actor(this._scrollView);
+        box.add_actor(this._scrollView);
+
+        this._clearButton = new St.Button({ style_class: 'message-list-clear-button button',
+                                            label: _("Clear All"),
+                                            can_focus: true });
+        this._clearButton.set_x_align(Clutter.ActorAlign.END);
+        this._clearButton.connect('clicked', () => {
+            let sections = [...this._sections.keys()];
+            sections.forEach((s) => { s.clear(); });
+        });
+        box.add_actor(this._clearButton);
 
         this._sectionList = new St.BoxLayout({ style_class: 'message-list-sections',
                                                vertical: true,
@@ -1129,6 +1143,7 @@ const CalendarMessageList = new Lang.Class({
             destroyId: 0,
             visibleId:  0,
             emptyChangedId: 0,
+            canClearChangedId: 0,
             keyFocusId: 0
         };
         obj.destroyId = section.actor.connect('destroy', Lang.bind(this,
@@ -1139,6 +1154,8 @@ const CalendarMessageList = new Lang.Class({
                                               Lang.bind(this, this._sync));
         obj.emptyChangedId = section.connect('empty-changed',
                                              Lang.bind(this, this._sync));
+        obj.canClearChangedId = section.connect('can-clear-changed',
+                                                Lang.bind(this, this._sync));
         obj.keyFocusId = section.connect('key-focus-in',
                                          Lang.bind(this, this._onKeyFocusIn));
 
@@ -1152,6 +1169,7 @@ const CalendarMessageList = new Lang.Class({
         section.actor.disconnect(obj.destroyId);
         section.actor.disconnect(obj.visibleId);
         section.disconnect(obj.emptyChangedId);
+        section.disconnect(obj.canClearChangedId);
         section.disconnect(obj.keyFocusId);
 
         this._sections.delete(section);
@@ -1172,10 +1190,16 @@ const CalendarMessageList = new Lang.Class({
         if (!visible)
             return;
 
-        let showPlaceholder = sections.every(function(s) {
+        let empty = sections.every(function(s) {
             return s.empty || !s.actor.visible;
         });
-        this._placeholder.actor.visible = showPlaceholder;
+        this._placeholder.actor.visible = empty;
+        this._clearButton.visible = !empty;
+
+        let canClear = sections.some(function(s) {
+            return s.canClear && s.actor.visible;
+        });
+        this._clearButton.reactive = canClear;
     },
 
     setEventSource: function(eventSource) {